<template>
  <div class="table">
	<el-divider content-position="left">动态表格</el-divider>
    <div class="btn">
      <el-button size='small' plain icon="el-icon-plus" @click="addData()"> 新增 </el-button>
    </div>
      <el-table size="small" :data="dataForm.list" border>
          <el-table-column prop="start" label="开始日期" width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.start" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="end" label="结束日期" width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.end" type="date" placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="用户" width="" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.user" placeholder="用户"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="person" label="负责人" width="" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.person" placeholder="负责人"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delData(scope.row)"> 删除 </el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-divider content-position="left">表格筛选</el-divider>
    <!-- 表格列筛选 -->
    <div style="text-align: right;margin-bottom: 0.5rem;">
      <el-popover placement="right" width="" trigger="click">
          <el-checkbox-group v-model="tableFilterData.checkBoxList">
            <template v-for="(item, i) in tableFilterData.dataNow2">
            <el-checkbox :label="item.attr" :key="i" checked style="display: block;margin:10px;" @change="filterFunHandle('filter',item.attr,i)">
              {{item.label}}
            </el-checkbox>
            </template>
          </el-checkbox-group>
          <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu" /> 列筛选</el-button>
          <el-button size="small" type="text" @click="filterFunHandle('allchecked')">全选</el-button>
          <el-button size="small" type="text" @click="filterFunHandle('cancel')">取消全选</el-button>
      </el-popover>
    </div>
    <!-- 筛选表格列 -->
    <el-table size="small" border :data="tableFilterData.dataList" style="width: 100%;">
        <el-table-column type="selection" fixed="left" header-align="center" align="center" width="50"></el-table-column>
        <template v-for="(col,index) in tableFilterData.dataNow">
          <el-table-column :key="index" align="center" :prop="col.attr" :label="col.label" min-width="180">
          </el-table-column>
        </template>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="" min-width="170">
          <template slot-scope="scope">
            <el-button type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
	  <!-- 表格清单列条筛选 -->
	  <el-divider content-position="left">表格清单列条筛选</el-divider>
	  <el-table
	      ref="filterTable"
	      :data="tableData"
	      style="width: 100%"
		  @filter-change="filterChange">
		  //filter-change 筛选条件确认后触发
	      <el-table-column
	        prop="date"
	        label="日期"
	        sortable
	        width="180"
	        column-key="date"
	        :filters="fliterList.date"
	        :filter-method="filterHandler"
	      >
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址"
	        :formatter="formatter">
	      </el-table-column>
	      <el-table-column
	        prop="tag"
	        label="标签"
	        width="100"
			column-key="tag"
	        :filters="fliterList.tag"
	        :filter-method="filterTag">
	        <template slot-scope="scope">
	          <el-tag
	            :type="scope.row.tag === '家' ? 'primary' : 'success'"
	            disable-transitions>{{scope.row.tag}}</el-tag>
	        </template>
	      </el-table-column>
	    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表格动态生成
      dataForm: {
        id: '',
        list: [
          {user: "张三",start: "2020-10-02",person: "负责人1",end: "2020-10-05"},
          {user: "李四",start: "2020-10-02",person: "负责人2",end: "2020-10-05"}
        ]
      },
      // 表格列筛选数据
      tableFilterData:{
        dataList: [
          {name: "张三", sex: "男", age: "22", address: "天津", 'position': '人'},
          {name: "李四", sex: "保密", age: "45", address: "河北", 'position': '人'},
          {name: "王五", sex: "女", age: "26", address: "北京", 'position': '人'}
        ],
        dataNow2: [
          {label: "姓名", attr: "name"},
          {label: "性别", attr: "sex"},
          {label: "年龄", attr: "age"},
          {label: "角色", attr: "position"},
          {label: "地址", attr: "address"}
        ],
        dataNow: [
          {label: "姓名", attr: "name"},
          {label: "性别", attr: "sex"},
          {label: "年龄", attr: "age"},
          {label: "角色", attr: "position"},
          {label: "地址", attr: "address"}
        ],
        checkLabels: [], // 筛选列显示多选框数据
        checkBoxList: [] // 筛选列数据
      },
	  tableData: [{
	            date: '2016-05-02',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 11 弄',
	            tag: '家'
	          }, {
	            date: '2016-05-04',
	            name: '王小兔',
	            address: '上海市普陀区金沙江路 22 弄',
	            tag: '公司'
	          }, {
	            date: '2016-05-01',
	            name: '王小猫',
	            address: '上海市普陀区金沙江路 33 弄',
	            tag: '家'
	          }, {
	            date: '2016-05-03',
	            name: '王小狗',
	            address: '上海市普陀区金沙江路 44 弄',
	            tag: '公司'
		}],
		fliterList:{
			date:[
				{text: '2016-05-01', value: '2016-05-01'}, 
				{text: '2016-05-02', value: '2016-05-02'}, 
				{text: '2016-05-03', value: '2016-05-03'},
				{text: '2016-05-04', value: '2016-05-04'},
			],
			date1:[
				{text: '2016-05-01', value: '2016-05-01'}, 
				{text: '2016-05-02', value: '2016-05-02'}, 
				{text: '2016-05-03', value: '2016-05-03'},
				{text: '2016-05-04', value: '2016-05-04'},
			],
			tag:[
				{ text: '家', value: '家' }, 
				{ text: '公司', value: '公司' },
			],
			tag1:[
				{ text: '家', value: '家' }, 
				{ text: '公司', value: '公司' },
			]
		}
		
			
    }
  },
  methods: {
    addData() { //表格1新增
      let obj = {}
        obj.resumeId = this.dataForm.id //设置一个字段
        this.dataForm.list.push(obj)
      },
    delData(item) {//表格2删除
      // 移除当前选中数据
      this.dataForm.list.splice(this.dataForm.list.indexOf(item), 1)
    },
    // 列筛选
    filterFunHandle (type, currentItem, index) {
		console.log(type, currentItem, index,event)
      if (type === 'filter') { // 筛选列
        if (event.target.checked === false) {
          let addItem = this.tableFilterData.dataNow.filter((item, index, arr) => {
			console.log(item, index, arr)
            return currentItem !== item.attr
          })
		  console.log(addItem)
          this.tableFilterData.dataNow = addItem
        } else {
          let checkData = this.tableFilterData.dataNow2.filter((item, index, arr) => {
            return currentItem === item.attr
          })
          checkData.map((item, index, arr) => {
            this.tableFilterData.dataNow.unshift(item)
          })
        }
      } else if (type === 'allchecked') { // 全选
        if (this.tableFilterData.checkLabels.length === 0) {
          this.tableFilterData.dataNow2.forEach((result) => {
            this.tableFilterData.checkLabels.push(result.attr)
          })
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
          this.tableFilterData.dataNow = this.tableFilterData.dataNow2
        } else {
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
          this.tableFilterData.dataNow = this.tableFilterData.dataNow2
        }
      } else if (type === 'cancel') { // 取消全选
        this.tableFilterData.checkBoxList = [] // 复选框置为空，全部不选择
        this.tableFilterData.dataNow = []
      }
    },
	resetDateFilter() {
	  this.$refs.filterTable.clearFilter('date');
	},
	clearFilter() {
	  this.$refs.filterTable.clearFilter();
	},
	formatter(row, column) {
	  return row.address;
	},
	filterTag(value, row) {
	  return row.tag === value;
	},
	filterHandler(value, row, column) {
	  const property = column['property'];
	  return row[property] === value;
	},
	//数组去重封装
	unique(arr1) {
		const res = new Map()
		return arr1.filter((item) => !res.has(item.value) && res.set(item.value, 1))
	},
	filterChange(e){
		console.log(e)
		if(e.date){
			if(e.date.length>0){
				this.fliterList.tag=[]
				for (let i = 0; i < this.tableData.length; i++) {
				    for (let j = 0; j < e.date.length; j++) {
				         if (e.date[j] == this.tableData[i].date) {
				           this.fliterList.tag.push({
				             'text': this.tableData[i].tag,
				             'value': this.tableData[i].tag,
				           })
				         }
				       }
				       this.fliterList.tag = this.unique(this.fliterList.tag)
				     }
			} else {
				     this.fliterList.tag = this.fliterList.tag1
			}
				
		}
		
		if(e.tag){
			if(e.tag.length>0){
				this.fliterList.date=[]
				for (let i = 0; i < this.tableData.length; i++) {
				    for (let j = 0; j < e.tag.length; j++) {
				         if (e.tag[j] == this.tableData[i].tag) {
				           this.fliterList.date.push({
				             'text': this.tableData[i].date,
				             'value': this.tableData[i].date,
				           })
				         }
				       }
				       this.fliterList.date = this.unique(this.fliterList.date)
				     }
			} else {
				     this.fliterList.date = this.fliterList.date1
			}
				
		}
	}
	
	
	}
  
}
</script>
